<?xml version="1.0" encoding="UTF-8"?>
<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.prime.com.tr/ui">
    <ui:composition template="/view/retail/template.xhtml">
        <ui:define  name="content">
            <f:view>
                <h:form id ="form1">
                    <p:dataTable id="accounts" value="#{accountManager.accounts}" var="item" paginator="true" rows="20"
                                 selectionMode="single" selection="#{accountManager.selectedAccount}"
                                 update="form2:display" onselectComplete="accountDialog.show()" >
                        <f:facet name="header">
                            <h:panelGrid columns="4" style="width: 300px">
                                <h:outputLabel value="模糊查询"></h:outputLabel>
                                <h:inputText value="#{accountManager.searchContent}" title="可输入部分男宾或女宾的姓名与电话进行查询"></h:inputText>
                                <p:commandLink update="form1:accounts" actionListener="#{accountManager.search}" title="查询">
                                    <p:graphicImage value="/resources/images/search.png"/>
                                </p:commandLink>
                                <p:ajaxStatus  style="width:16px;height:16px;">
                                    <f:facet name="start">
                                        <h:graphicImage  value="/resources/images/ajaxloading.gif" />
                                    </f:facet>
                                    <f:facet name="complete">
                                        <h:outputText value="" />
                                    </f:facet>
                                </p:ajaxStatus>
                            </h:panelGrid>
                        </f:facet>
                        <p:column>
                            <f:facet name="header">
                                <h:outputText value="男宾姓名"/>
                            </f:facet>
                            <h:outputText value="#{item.mname}"/>
                        </p:column>
                        <p:column>
                            <f:facet name="header">
                                <h:outputText value="男宾电话"/>
                            </f:facet>
                            <h:outputText value="#{item.mphone}"/>
                        </p:column>
                        <p:column>
                            <f:facet name="header">
                                <h:outputText value="男宾生日"/>
                            </f:facet>
                            <h:outputText value="#{item.mbirthday}">
                                <f:convertDateTime pattern="MM/dd/yyyy" />
                            </h:outputText>
                        </p:column>
                        <p:column>
                            <f:facet name="header">
                                <h:outputText value="女宾姓名"/>
                            </f:facet>
                            <h:outputText value="#{item.fname}"/>
                        </p:column>
                        <p:column>
                            <f:facet name="header">
                                <h:outputText value="女宾电话"/>
                            </f:facet>
                            <h:outputText value="#{item.fphone}">
                                <f:convertDateTime pattern="yyyy-MM-dd" />
                            </h:outputText>
                        </p:column>
                        <p:column>
                            <f:facet name="header">
                                <h:outputText value="女宾生日"/>
                            </f:facet>
                            <h:outputText value="#{item.fbirthday}">
                                <f:convertDateTime pattern="yyyy-MM-dd" />
                            </h:outputText>
                        </p:column>
                        <p:column>
                            <f:facet name="header">
                                <h:outputText value="固定电话"/>
                            </f:facet>
                            <h:outputText value="#{item.phone}"/>
                        </p:column>
                        <p:column>
                            <f:facet name="header">
                                <h:outputText value="公司"/>
                            </f:facet>
                            <h:outputText value="#{item.company}"/>
                        </p:column>
                        <p:column>
                            <f:facet name="header">
                                <h:outputText value="结婚日期"/>
                            </f:facet>
                            <h:outputText value="#{item.marriageDate}">
                                <f:convertDateTime pattern="yyyy-MM-dd" />
                            </h:outputText>
                        </p:column>
                        <p:column>
                            <f:facet name="header">
                                <h:outputText value="地址"/>
                            </f:facet>
                            <h:outputText value="#{item.address}"/>
                        </p:column>
                    </p:dataTable>
                </h:form>

                <p:dialog header="编辑客户档案" widgetVar="accountDialog"
                          modal="true" draggable="false" width="300">
                    <h:form id="form2">
                        <h:panelGrid columns="2" id="display">
                            <h:outputLabel value="男宾姓名:" for="mname" />
                            <h:inputText id="mname" value="#{accountManager.selectedAccount.mname}" title="Mname" />
                            <h:outputLabel value="男宾电话:" for="mphone" />
                            <p:inputMask id="mphone" value="#{accountManager.selectedAccount.mphone}"  title="Mphone" mask="99999999999" validator="#{accountManager.checkUniqueMPhone}">
                                <p:ajax event="blur" update="form:growl"/>
                            </p:inputMask>
                            <h:outputLabel value="男宾生日:" for="mbirthday" />
                            <p:calendar id="mbirthday" value="#{accountManager.selectedAccount.mbirthday}" navigator="true" locale="zh_CN" pattern="yyyy-MM-dd" />

                            <h:outputLabel value="女宾姓名:" for="fname" />
                            <h:inputText id="fname" value="#{accountManager.selectedAccount.fname}" title="Fname" />
                            <h:outputLabel value="女宾电话:" for="fphone" />
                            <p:inputMask id="fphone" value="#{accountManager.selectedAccount.fphone}" title="Fphone" mask="99999999999" validator="#{accountManager.checkUniqueFPhone}">
                                <p:ajax event="blur" update="form:growl"/>
                            </p:inputMask>
                            <h:outputLabel value="女宾生日:" for="fbirthday" />
                            <p:calendar id="fbirthday" value="#{accountManager.selectedAccount.fbirthday}" navigator="true" locale="zh_CN" pattern="yyyy-MM-dd"/>
                            <h:outputLabel value="固定电话:" for="phone" />
                            <p:inputMask id="phone" value="#{accountManager.selectedAccount.phone}" title="Phone" mask="99999999999"/>
                            <h:outputLabel value="公司:" for="company" />
                            <h:inputText id="company" value="#{accountManager.selectedAccount.company}" title="Company" />
                            <h:outputLabel value="结婚日期:" for="marriageDate" />
                            <p:calendar id="marriageDate" value="#{accountManager.selectedAccount.marriageDate}" navigator="true"  pattern="yyyy-MM-dd" />
                            <h:outputLabel value="地址:" for="address" />
                            <h:inputTextarea id="address" value="#{accountManager.selectedAccount.address}" rows="2"/>
                            <f:facet name="footer">
                                <h:panelGroup>
                                    <p:commandButton value="保存" actionListener="#{accountManager.save}"  update="form1:accounts" onclick="accountDialog.hide()"></p:commandButton>
                                    <p:commandButton value="取消" onclick="accountDialog.hide()"></p:commandButton>
                                </h:panelGroup>
                            </f:facet>
                        </h:panelGrid>
                    </h:form>
                </p:dialog>
            </f:view>
        </ui:define>
    </ui:composition>
</html>
